<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true">
			<text slot='center-slot' class="center-slot">个人信息</text>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>

		<!-- 我的baby -->
		<view class="" style="height: 40rpx;">

		</view>
		<view class="top-box">
			<view class="top-cell justify-between align-center" @tap="setCategory(1)">
				<view class="my-qing-long">
					头像
				</view>
				<view class="justify-start align-center">
					<view class="name">


						<!-- <image @tap="selectiAva" class="ava" :src="avatar" mode=""> </image> -->
						<yqAvatar
						       selWidth="200px" selHeight="400upx" @upload="myUpload"
								:quality='0.3'
								:avatarSrc="avatar"
								expWidth='96rpx'
								expHeight='96rpx'
						       avatarStyle="width: 96rpx; height: 96rpx; border-radius: 8rpx">
						   </yqAvatar>
					</view>

					<image class="long-num" src="/static/images/mine/jiantou.svg" mode=""></image>
				</view>
			</view>
			<view class="top-cell justify-between align-center" @tap="$navto('/pages/mine/setting/updateUserDetails')">
				<view class="my-qing-long">
					昵称
				</view>
				<view class="justify-start align-center">
					<view class="name">
						{{nickname}}
					</view>

					<image class="long-num" src="/static/images/mine/jiantou.svg" mode=""></image>
				</view>
			</view>
			<view class="top-cell justify-between align-center" @tap="genderIsShow=true">
				<view class="my-qing-long">
					性别
				</view>
				<view class="justify-start align-center">
					<view class="name">
						{{form.gender==1?'男':form.gender==2?'女':'请选择'}}
					</view>

					<image class="long-num" src="/static/images/mine/jiantou.svg" mode=""></image>
				</view>
			</view>
			<u-picker :show="genderIsShow" @confirm='genderConfirm' @cancel='genderIsShow=false'
				:columns="genderList"></u-picker>
		</view>
		<view class="top-box">
			<view class="top-cell justify-between align-center">
				<view class="my-qing-long">
					手机号
				</view>
				<view class="name">
					{{form.mobile}}
				</view>
			</view>
		</view>

		<!-- <view class="btn justify-center align-center">
			退出登录
		</view> -->

		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.7'>
			<view class="popup-one-box flex-col align-center">

				<view class="has-shuijing justify-center">
					实名认证后即可使用本功能
				</view>
				<view class=" justify-between">
					<view class="popup-box-btn align-center justify-center" @click="moneyShow=false">
						取消
					</view>
					<view class="popup-box-btn-1 align-center justify-center"
						@click="$navto('/pages/mine/setting/userRealName')">
						去实名
					</view>
				</view>


			</view>
		</u-popup>
		 
	</view>
</template>

<script>
	import yqAvatar from "@/components/yq-avatar/yq-avatar.vue";
	import {
		geTel
	} from '@/utils/libs.js'
	import {
		pathToBase64
	} from '@/utils/libs.js'
	export default {
	components:{
		yqAvatar
	},
		data() {
			return {
				 url1: "/static/logo.png",
				current: 0,
				nickname: '',
				avatar: '',
				base64: '',
				form: {
					mobile: null, //	否	string	手机号
					smscode: null, //	否	string	短信码
					nickname: null, //	否	string	昵称
					airline_id: null, //	否	string	航司ID
					position: null, //	否	string	职务
					identity: null, //	否	string	证件照
					name: null, //	否	string	证件照
					gender: '请选择',

				},
				genderIsShow: false,
				genderList: [
					['男', '女']
				],
				moneyShow: false,
				realName: false, //是否实名
			}
		},
		onShow() {
			const value = uni.getStorageSync('userInfo')
			if (value) {
				this.nickname = value.nickname
				this.avatar = value.avatar
				this.form.gender = value.gender
				this.form.mobile = value.mobile
			}
		},
		methods: {
			geTel, //手机号脱敏,
			 myUpload(rsp) {
				 console.log(rsp,'rsp.path');
				 // #ifdef H5
				 this.base64 = rsp.base64; //更新头像方式一
				 this.update()
				 // #endif
				 // #ifdef APP-PLUS
				 this.urlTobase64(rsp.path)
				 // #endif
			                //rsp.avatar.imgSrc = rsp.path; //更新头像方式二
			            },
			// #ifdef APP-PLUS || H5
			async urlTobase64(url) {
				let imgData = await pathToBase64(url)
				console.log('imgData', imgData);
				// this.base64 = 'data:image/jpeg;base64,' + imgData;
				this.base64 = imgData;
				this.update()
			},
			// #endif

			selectiAva() {
				return
				let _this = this
				console.log('选择头像');
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res, '返回临时路径');
						const tempFilePath = res.tempFilePaths[0]
						_this.urlTobase64(tempFilePath) 
					},
					fail:(err)=>{
						// console.log("err",err);
						// if(err.errMsg=='chooseImage:fail User cancelled'){
						// 	_this.$refs.uToast.show({
						// 		message: '用户已取消',
						// 		type: 'default',
						// 		duration: '500'
							
						// 	})
						// }else{
						// _this.$refs.uToast.show({
						// 	message: '请打开权限访问',
						// 	type: 'default',
						// 	duration: '500'
						
						// })
						// }
						
					}
				})
			},
			// #ifdef H5
			// urlTobase64(url) {
			// 	let _this = this
			// 	uni.request({
			// 	url: url,
			// 	method: 'GET',
			// 	responseType: 'arraybuffer',
			// 	success: async res => {
			// 			let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
			// 		_this.base64 = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
			// 		_this.update()
			// 		}
			// 	});
			// },
			// #endif
			// 新增图片
			async afterRead(event) {
				console.log('上传', event);
				// #ifdef H5 || MP-WEIXIN
				this.urlTobase64(event.file.url)
				// #endif
				// #ifdef APP-PLUS || APP
				uni.compressImage({
					src: event.file.url,
					quality: 100,
					success: res => {
						this.urlTobase64(res.tempFilePath)
					}
				})
				// #endif

				return
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				console.log(lists);
				console.log(this[`fileList${event.name}`]);
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					console.log(result);
					this.fullurl = result
				}
			},
			uploadFilePromise(url) {
				let _this = this
				console.log('token', _this.$store.token);
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: host + '/api/v1/uploadimg',
						filePath: url,
						name: 'file',
						formData: {
							token: _this.$store.token || uni.getStorageSync('token')
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.fullurl)
							}, 1000)
						},
						// fail:(error)=>{
						// 	reject(error);
						// }
					});
				})
			},
			genderConfirm(e) {
				// this.form.gender = e.value[0]
				this.form.gender = e.value[0] == '男' ? '1' : '2'
				this.genderIsShow = false
				console.log(e.value[0]);
				this.update()
			},
			async update() {
				let url = '/api/v1/edit_user'
				let {
					code,
					msg,
					data
				} = await this.$postRequest(url, {
					gender: this.form.gender,
					avatar: this.base64
				})
				if (code == 200) {
					this.avatar = data.avatar
					this.getCardInfo()
					this.$refs.uToast.show({
						message: '修改成功'
					})
					console.log(data, '静态资源');
				}
			},
			async getCardInfo() {
				let url = '/api/v1/my'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url)
				if (code == 200) {
					console.log(data, '静态资源');
					uni.setStorageSync('userInfo', data[0])
					this.userInfo = data[0]
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			setCategory(value) {
				// 修改头像上传
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	/deep/.u-picker{
		// background: #000;
		color: #FFF;
		
	}
	/deep/.uni-picker-view-mask{
		background:  #21202e;
		z-index: -1;
		color: #FFF;
	}
	/deep/.u-picker__view__column__item{
		// background: #000;
		position: relative;
		z-index: 10000;
		color: #0AFE8C !important;
	}
	/deep/ .uni-picker-view-indicator{
		&::before{
			 //    color: #171722;
				// border-bottom: 1px solid #171722;
		}
		&::after{
			 //    color: #171722;
				// border-bottom: 1px solid #171722;
		}
	}
	.big-box {
		background: #16161e;
		padding: 0 32rpx 60rpx;
		min-height: 100vh;

		.center-slot {
			color: #FFF;
		}




	}

	.btn {
		left: 50%;
		transform: translate(-50%, 0);
		right: 0;
		position: fixed;
		height: 90rpx;
		width: calc(100vw - 96rpx);
		border-radius: 8rpx;
		bottom: 120rpx;
		font-weight: 700;
		font-size: 30rpx;
		background-color: rgb(32, 32, 44);
		color: rgba(255, 255, 255, 0.8);
	}

	.top-box {
		width: 100%;
		position: relative;
		margin: 0rpx auto 24rpx;
		padding: 0rpx 32rpx;
		background-color: #20202c;
		border-radius: 16rpx;

		.top-cell {
			background: #20202c;
			min-height: 120rpx;
			padding: 20rpx 0;

			.name {
				margin-right: 30rpx;
				font-size: 28rpx;
				color: rgba(255, 255, 255, .8);

			}

			.ava {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
			}
		}


		.my-qing-long {
			font-size: 28rpx;
			width: 260rpx;
			color: rgba(255, 255, 255, .8);
			text-align: left;
		}

		.long-num {
			width: 30rpx;
			height: 30rpx;

		}
	}

	.feature-app {
		height: 400rpx;
		width: 100%;
		padding: 46rpx 32rpx 0;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		background-color: #20202c;
		border-radius: 16rpx;

		.set-name {
			font-size: 28rpx;
			color: #FFF;
		}

		.jiantou {
			width: 30rpx;
			height: 30rpx;
		}

		.feature-box-app {
			margin: 32rpx 0 32rpx;
			width: 155rpx;

			.open-map-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 22rpx;
			}

			.title-order {
				font-size: 24rpx;
				color: #FFFFFFCC;
			}
		}

	}


	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #1D1D1D;
		padding: 48rpx 40rpx;

		.has-shuijing {
			width: 100%;
			height: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 48rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			width: 227rpx;
			height: 72rpx;
			background: #252727;
			color: rgba(255, 255, 255, .4);
			font-size: 28rpx;
			border-radius: 8rpx;
		}

		.popup-box-btn-1 {
			width: 227rpx;
			height: 72rpx;
			background: #27FF92;
			color: #000;
			font-size: 28rpx;
			margin-left: 24rpx;
			border-radius: 8rpx;
		}




		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}







	}
</style>